<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>From Html</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../bootstrap.min.css" />
<link rel="stylesheet" href="../dist/bootstrap-table.css" />
<script type="text/javascript" src="../../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../popper.min.js"></script>
<script type="text/javascript" src="../../bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>
</head>
<body>

<div id="toolbar">
    <button class="btn btn-primary"><i class="fa fa-plus fa-1"></i>&nbsp;新增</button>
    <button class="btn btn-info"><i class="fa fa-edit fa-1"></i>&nbsp;修改</button>
    <button class="btn btn-danger"><i class="fa fa-times fa-1"></i>&nbsp;删除</button>
</div>
<table data-toggle="table" data-show-columns="true" data-show-columns-toggle-all="true"
       data-show-toggle="true" data-show-fullscreen="true" data-show-refresh="true"
       data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar"
       data-toolbar-align="left" data-icons="iconCustom"
>
    <thead>
        <tr>
            <th data-checkbox="true"></th>
            <th data-click-to-select="false" data-formatter="formatIndex">序号</th>
            <th data-align="center" data-sortable="true">势力</th>
            <th data-align="center" data-sortable="true">勾玉</th>
            <th data-sortable="true">姓名</th>
            <th data-align="center">性别</th>
            <th>战功</th>
            <th>战功描述</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td>群</td><td>3</td>
            <td>张角</td>
            <td>男</td>
            <td>狂奔的蜗牛</td>
            <td>使用张角在1局游戏中发动雷击，至少击败3名角色</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>群</td>
            <td>4</td>
            <td>吕布</td>
            <td>男</td>
            <td>飞将</td>
            <td>使用吕布发动方天画戟特效使用一张杀至少击败2名角色</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>群</td>
            <td>3</td>
            <td>貂蝉</td>
            <td>女</td>
            <td>倾国倾城</td>
            <td>使用貂蝉在一局游戏中发动离间造成至少3名角色被击败</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>群</td>
            <td>3</td>
            <td>华佗</td>
            <td>男</td>
            <td>乱世名医</td>
            <td>使用华佗在一局游戏中发动急救使至少3个不同的角色脱离求桃状态</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
function formatIndex(value , row , index) {
    return index + 1;
}
//示例中图标库包包含fa-refresh的示例，故采用自定义图标
window.iconCustom = {
    refresh: "fa-refresh",
    fullscreen: "fa-arrows-alt",
    toggleOn: "fa-toggle-on",
    toggleOff: "fa-toggle-off",
    columns: "fa-th-list"
};
</script>
</body>
</html>